<template>
    <div class="login-page">
        <div class="login-header">
            <div class="container">
                <div class="lheader-main">
                    <a href="/" class="header-logo flex-center">
                        <img class="logo" src="@/assets/logo/logo_all.png" alt="">
                    </a>
                </div>
            </div>
        </div>
        <div class="login-main">
            <img class="login-bg" src="@/assets/images/bg_pic.jpg" alt="">
            <div class="login-box vvv2">
                <div class="login-cont">

                    <div class="login-navs flex-center">
                        <div class="nav-item  flex-center on">
                            立即注册
                        </div>
                    </div>

                    <div class="login-form">
                        <div class="f-err " :class="{ on: showerr }">
                            <img class="icon" src="@/assets/images/icon_warn.png" alt="">
                            <div>
                                <span>{{ errtext }}</span>
                            </div>
                        </div>
                        <div class="f-cont">
                            <div class="f-item flex-center">
                                <div class="f-icon">
                                    <img class="icon" src="@/assets/images/icon_login_user.png" alt="">
                                </div>
                                <input v-model="registerForm.username" type="text" class="finput" placeholder="用户名">
                            </div>
                            <div class="f-item fvvv2 flex-center">
                                <div class="f-icon">
                                    <img class="icon" src="@/assets/images/icon_login_lock.png" alt="">
                                </div>
                                <input v-model="registerForm.password" @keyup.enter="handleRegister"
                                    :type="showpwd ? 'text' : 'password'" class="finput" placeholder="请输入您的密码">
                                <div @click="showpwdfun(1)" class="f-icon">
                                    <img class="icon2" src="@/assets/images/eye_close.png" alt="">
                                </div>
                            </div>
                            <div class="f-item fvvv2 flex-center">
                                <div class="f-icon">
                                    <img class="icon" src="@/assets/images/icon_login_lock.png" alt="">
                                </div>
                                <input v-model="registerForm.confirmPassword" @keyup.enter="handleRegister"
                                    :type="showpwd2 ? 'text' : 'password'" class="finput" placeholder="请再次输入密码">
                                <div @click="showpwdfun(2)" class="f-icon">
                                    <img class="icon2" src="@/assets/images/eye_close.png" alt="">
                                </div>
                            </div>
                            <div class="f-vbox">
                                <div class="f-item fvvv3 flex-center">
                                    <div class="f-icon">
                                        <img class="icon" src="@/assets/images/icon_Code.png" alt="">
                                    </div>
                                    <input v-model="registerForm.code" @keyup.enter="handleRegister" type="text"
                                        class="finput" placeholder="验证码">
                                </div>
                                <div class="register-code">
                                    <img :src="codeUrl" @click="getCode" class="register-code-img" />
                                </div>
                            </div>
                        </div>


                        <div @click="handleRegister" class="f-btn flex-center" style="cursor: pointer;">
                            注 册
                        </div>
                    </div>

                    <div class="login-fbox flex-center">
                        <div class="f-item">
                            <router-link class="link-type" :to="'/login'">立即登录</router-link>
                        </div>
                       <!-- <div class="f-line"></div> -->
                        <!-- <div class="f-item">忘记密码 </div>
                        <div class="f-line"></div> -->
                       <!-- <div class="f-item f-color">返回</div> -->
                    </div>

                </div>
            </div>
        </div>
        <div class="login-footer flex-center">
            <div class="text">@ 深圳市耘融易互联网有限公司 粤ICP备2024166865号</div>
        </div>
    </div>
</template>

<script setup>
import { ElMessageBox } from "element-plus";
import { getCodeImg, register } from "@/api/login";

const router = useRouter();
const { proxy } = getCurrentInstance();

const registerForm = ref({
    username: "",
    password: "",
    confirmPassword: "",
    code: "",
    uuid: ""
});

const equalToPassword = (rule, value, callback) => {
    if (registerForm.value.password !== value) {
        callback(new Error("两次输入的密码不一致"));
    } else {
        callback();
    }
};

const registerRules = {
    username: [
        { required: true, trigger: "blur", message: "请输入您的账号" },
		{ pattern: /^[a-zA-Z0-9]+$/, message: '账号只能英文和数字', trigger: 'blur' },
        { min: 2, max: 20, message: "用户账号长度必须介于 2 和 20 之间", trigger: "blur" }
    ],
    password: [
        { required: true, trigger: "blur", message: "请输入您的密码" },
        { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }
    ],
    confirmPassword: [
        { required: true, trigger: "blur", message: "请再次输入您的密码" },
        { required: true, validator: equalToPassword, trigger: "blur" }
    ],
    code: [{ required: true, trigger: "change", message: "请输入验证码" }]
};

const codeUrl = ref("");
const loading = ref(false);
// 显示错误
const showerr = ref(false);
const errtext = ref("");

// 显示密码开关
const showpwd = ref(false);
const showpwd2 = ref(false);

const captchaEnabled = ref(true);

function handleRegister() {
    if (loading.value) {
        return
    }
    showerr.value = false;

    if (!registerForm.value.username) {
        showerr.value = true;
        errtext.value = "请输入您的账号";
        return
    }
	var reg=/^[a-zA-Z0-9]+$/;
	if(!reg.test(registerForm.value.username))
	{
		showerr.value = true;
		errtext.value = "账号只能英文和数字";
		return
	}
    if (registerForm.value.username.length > 20 || registerForm.value.username.length < 2) {
        showerr.value = true;
        errtext.value = "用户账号长度必须介于 2 和 20 之间";
        return
    }

    if (!registerForm.value.password) {
        showerr.value = true;
        errtext.value = "请输入您的密码";
        return
    }

    if (registerForm.value.password.length > 20 || registerForm.value.password.length < 5) {
        showerr.value = true;
        errtext.value = "用户密码长度必须介于 5 和 20 之间";
        return
    }

    if (!registerForm.value.confirmPassword) {
        showerr.value = true;
        errtext.value = "请再次输入您的密码";
        return
    }

    if (registerForm.value.password != registerForm.value.confirmPassword) {
        showerr.value = true;
        errtext.value = "两次输入的密码不一致";
        return
    }

    if (!registerForm.value.code) {
        showerr.value = true;
        errtext.value = "请输入验证码";
        return
    }


    loading.value = true;
    register(registerForm.value).then(res => {
        const username = registerForm.value.username;
        ElMessageBox.alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", "系统提示", {
            dangerouslyUseHTMLString: true,
            type: "success",
        }).then(() => {
            router.push("/login");
        }).catch(() => { });
    }).catch(() => {
        loading.value = false;
        if (captchaEnabled) {
            getCode();
        }
    });
}

function showpwdfun(type) {
    if (type == 1) {
        var show = showpwd.value
        showpwd.value = !show
    } else if (type == 2) {
        var show = showpwd2.value
        showpwd2.value = !show
    }

}

function getCode() {
    getCodeImg().then(res => {
        captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (captchaEnabled.value) {
            codeUrl.value = "data:image/gif;base64," + res.img;
            registerForm.value.uuid = res.uuid;
        }
    });
}

getCode();
</script>

<style lang='scss' scoped></style>
